<template>
    <div class="index">

        <!--S下拉刷新-->
        <div id="down-refresh" :style="{transform:'translateY('+refresh.top+'px)',opacity:refresh.opacity}">
            下拉获取新的红包
            <div class="icon-loading" :class="refresh.class_name"></div>
        </div>
        <!--E下拉刷新-->

        <!--S红包列表组件-->
        <div id="list" v-if="this.list.data.length > 0"
             @touchstart="touchstart"
             @touchmove="touchmove"
             @touchend="touchend">
            <slide
                    :data="list.data"
                    @change="change">
            </slide>
        </div>
        <!--E红包列表组件-->

        <!--S空列表-->
        <div id="empty" v-else @touchstart.prevent>
            <template v-if="list.first_loading">
                <img class="loading" src="./images/refresh-doing.svg" />
            </template>
            <template v-else>
                <div class="empty">
                    <svg class="icon"><use xlink:href="#icon-kong"></use></svg>
                    <h2>暂无红包</h2>
                </div>
            </template>
        </div>
        <!--E空列表-->

        <!--S无更多内容了-->
        <div id="no-more" :style="{transform:'translateY('+more.top+'px)',opacity:this.more.opacity}">
            没有更多红包了哦
        </div>
        <!--E无更多内容了-->

        <!--S显示上拉加载新的红包-->
        <div id="hint-more" v-if="show_hint_more">
            <div class="box">
                <p><i class="cubeic-back"></i></p>
                <div class="text">上拉加载更多</div>
                <cube-button class="button" :outline="true" @click="knowMore">我知道了</cube-button>
            </div>
        </div>
        <!--E显示上拉加载新的红包-->


        <!--S子页面-->
        <transition :name="transition_name">
            <router-view class="children" />
        </transition>
        <!--E子页面-->
    </div>
</template>

<script>
    import slide from "../../module/slide/Slide";
    import Tool from "../../util/Tool.js";
    import store from "../../store/index";
    import { mapState } from 'vuex'
    import share from "../../util/share";
    export default {
        name: "index",
        data(){
          return {
              transition_name:"",  //子页面加载动画
              enter_red_id:0,  //入口红包id
              show_hint_more:0,  //如果是新用户，提示用户上拉加载更多
              list:{   //红包列表
                  first_loading:true,  //是否第一次加载
                  limit:[0,10],  //请求下标
                  data:[],  //列表数据
                  change_prev_index:0,   //切换slide上一个index
                  loading_prev_index:0  //上一次加载的index,解决重复加载的问题
              },
              //下拉刷新
              refresh:{
                  top:0, //刷新区域top值
                  opacity:0, //刷新区域透明的
                  start_pageY:0,   //点击开始pageY坐标
                  class_name:"doing"   //css类目   doing || static
              },
              //上拉显示无更多内容
              more:{
                  top:0,  //无更多内容top值
                  opacity:0, //无更多内容透明的
                  start_pageY:0  //点击开始pageY坐标
              }
          }
        },
        components:{
            slide
        },
        beforeRouteUpdate(to, from, next){
            if(to.name === 'publish' || from.name === 'publish'){
                if(to.name === 'publish'){
                    this.transition_name = "animated publish-animated slideInUp delay-2s";
                }else{
                    this.transition_name = "animated publish-animated slideOutDown delay-2s";
                }
            }else{
                this.transition_name = to.path.split('/').length < from.path.split('/').length ? "animated publish-animated slideOutRight delay-2s" : "animated publish-animated slideInRight delay-2s";
            }
            setTimeout(()=>{
                next();
            },10);
        },
        watch:{
            "$route"(to,from){
                if(from.name === 'publish'){
                    if(this.share.red_id !== this.enter_red_id){
                        this.enter_red_id = this.share.red_id;
                        this.list.first_loading = true;
                        this.list.data = [];
                        this.list.limit = [0,10];
                        this.list.change_prev_index = 0;
                        this.list.loading_prev_index = 0;
                        this.getEnterRed();
                    }
                }
            }
        },
        computed: {
            ...mapState({
                'share':'share'
            })
        },
        created() {
            this.$parent.tab_index = 0;
            this.getMember();
            Tool.parseShareId()
                .then(() => {
                    this.enter_red_id = this.share.red_id;
                    return Tool.location()
                })
                .then(()=>{
                    if(this.enter_red_id){
                        this.getEnterRed();
                    }else{
                        this.getList();
                    }
                })
            Tool.getSetting();
        },
        methods:{
            //Run
            // 获取用户手机号
            getMember () {
              this.$url("memberA/find")
                .then((res) => {
                    let { data, status } = res.data
                    if(status === "success") {
                        store.commit("setPhone",data.phone)
                    }
                });
            },
            /**
             * 获取列表
             */
            getList(){
                this.$url('redDetail/getList',{
                    limit:this.list.limit,
                    enter_red_id:this.enter_red_id,
                    area:store.state.area
                })
                    .then((res)=>{
                        if(this.list.first_loading) this.list.first_loading = false;
                        if(res.data.status === 'success'){
                           this.list.data.push(...res.data.data);
                            if(this.$wx && this.list.limit[0] <= 2){
                                share(this.$route.name,this.enter_red_id ? this.enter_red_id : this.list.data[0].id);
                            }
                           this.list.limit[0] += this.list.limit[1];
                           if(this.list.data.length > 1){
                               this.testShowHintMore();
                           }
                        }
                    });
            },
            /**
             * 加载入口红包
             */
            getEnterRed(){
                this.$url('redDetail/easyFind',{
                    red_id:this.enter_red_id,
                    return:['red_type','share']
                })
                    .then((res)=>{
                        if(res.data.status === 'success'){
                            let data = res.data.data;
                            this.list.data = [{id:''+this.enter_red_id,red_type:data.red_type}];
                            if(data.share === '1'){
                                this.getList();
                            }else{
                                if(this.$wx){
                                    share(this.$route.name,this.enter_red_id);
                                }
                            }
                        }
                    });
            },
            /**
             * 是否显示上拉加载更多
             */
            testShowHintMore(){
                this.$url("member/easyFind",{
                    return:["hint_more"]
                })
                    .then((res)=>{
                        if(res.data.status === "success"){
                            this.show_hint_more = parseInt(res.data.data.hint_more);
                        }
                    })
            },

            //Handle
            /**
             * 列表切换slide
             * @param index
             */
            change(index){
                //加载新的数据
                if(this.list.change_prev_index < index){
                    if(this.list.data.length-index === 5 && index > this.list.loading_prev_index){
                        this.getList();
                        this.list.loading_prev_index = index;
                    }
                }
                this.list.change_prev_index = index;
            },
            /**
             *知道可以上拉加载更多红包了
             */
            knowMore() {
                this.$url("member/knowMore");
                this.show_hint_more = 0;
            },
            /**
             * slide开始滑动
             */
            touchstart(res){
                this.more.start_pageY = this.refresh.start_pageY = res.touches[0].pageY;
            },
            /**
             * slide滑动，上拉或者下拉
             */
            touchmove(res){
                let iPageY = res.touches[0].pageY;
                if(this.list.data.length > 1){
                    //下拉刷新
                    if(this.list.change_prev_index === 0 && iPageY > this.refresh.start_pageY){
                        if(iPageY - this.refresh.start_pageY <= 30){
                            this.refresh.top = iPageY - this.refresh.start_pageY;
                            this.refresh.opacity = 1-(1/(iPageY - this.refresh.start_pageY));
                        }else{
                            this.refresh.opacity = 1;
                        }
                    }

                    //上拉无更多内容
                    if(this.list.change_prev_index === this.list.data.length-1 && iPageY < this.more.start_pageY){
                        if(Math.abs(iPageY -  this.more.start_pageY) <= 30){
                            this.more.top = iPageY - this.more.start_pageY;
                            this.more.opacity = 1-(1/(Math.abs(iPageY - this.more.start_pageY)));
                        }else{
                            this.more.opacity = 1;
                        }
                    }
                }
            },
            /**
             * slide滑动结束
             */
            touchend(){
                //下拉刷新
                if(this.refresh.opacity > 0 && this.refresh.opacity < 1){
                    this.refresh.top = 0;
                    this.refresh.opacity = 0;
                }else if(this.refresh.opacity === 1){
                    this.refresh.top = 0;
                    this.refresh.class_name = "doing";
                    setTimeout(()=>{
                        this.enter_red_id = 0;
                        this.list.first_loading = true;
                        this.list.limit = [0,10];
                        this.list.data = [];
                        this.list.change_prev_index = 0;
                        this.list.loading_prev_index = 0;
                        this.getList();
                        this.refresh.opacity = 0;
                        this.refresh.class_name = "static";
                    },1000);
                }

                //无更多内容
                if(this.more.opacity > 0){
                    this.more.top = 0;
                    setTimeout(()=>{
                        this.more.opacity = 0;
                    },100);
                }
            }
        }
    }
</script>

<style scoped lang="less" src="./index.less"></style>
